<ion-header>
  <ion-toolbar
    ><ion-title><span> 第{{currentChapterNo | async}}章 - 第{{(currentSequenceNo | async ) }}句 </span> </ion-title>
    <div class="languageSelector">
      <ion-label>英</ion-label>
      <ion-checkbox (ionChange)="enChange($event)" [checked]="englishChecked"></ion-checkbox>
      <ion-label>中</ion-label>
      <ion-checkbox (ionChange)="zhChange($event)" [checked]="chineseChecked"></ion-checkbox>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <app-slider
    [sentences]="sentences | async"
    [currentSentence]="currentSentence | async"
    [englishChecked]="englishChecked"
    [chineseChecked]="chineseChecked"
    (slideNext)="slideNext($event)"
    (slidePrevious)="slidePrevious($event)"
  ></app-slider>
  <app-player
    [sentence]="currentSentence | async"
    [currentSequenceNo]="currentSequenceNo | async"
    [waitTime]="waitTime |async"
    [autoPlaying]="autoPlaying |async"
    (loadNextSentence)="loadNextSentence($event)"
    (gotoNextChapter)="gotoNextChapter()"
    (gotoPreviousChapter)="gotoPreviousChapter()"
  >
  </app-player>
</ion-content>
